<template>
	<view>
		<input class="dwmc" @blur="searchFn(search,jsData)" v-model="search" placeholder="请输入项目名称,失去焦点开始搜索" placeholder-style="color:#AAAAAA" type="text" />
		<view class="jsts">
			<view v-for="(item,index) in searchData" :key="index" class="rcjd">
				<view class="sxk">
					<view>项目名称</view>
					<view>监管人员</view>
					<view>联系电话</view>
				</view>
				<view class="sxk">
					<view>{{item.buildname}}</view>
					<view>{{item.contacts}}</view>
					<view>{{item.tel}}</view>
				</view>
				<view>
					<button type="primary" v-if="item.projectstatus=='项目申请'" @click="kctz(item)">勘察</button>
					<button type="primary" v-if="item.projectstatus=='项目验收'" @click="ystz(item)">验收</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs,onMounted} from 'vue'
	import http from '../../utils/http'
	import {useStore} from 'vuex'
	export default {
		setup(){
			const {commit}=useStore();
			let data=reactive({
				jsData:[],
				searchData:[],
				search:'',
				searchFn:(v,dat)=>{
					data.searchData=[];
					dat.forEach(item=>{
						let name=String(item.buildname);
						if(name.indexOf(v)!=-1){
							data.searchData.push(item);	
						}
					})
				},
				kctz(v){
					commit('slapp/setKY',v)
					uni.navigateTo({url:'/pages/slsy/jskc'})
				},
				ystz(v){
					commit('slapp/setKY',v)
					uni.navigateTo({url:'/pages/slsy/jsys'})
				}
			})
			onMounted(()=>{
				http({
					url:'/jsts'
				}).then((res)=>{
					data.jsData=res.data.data
					data.searchData=res.data.data
				})
			})
			return {...toRefs(data)}
		}
	}
</script>

<style lang="scss">
	.dwmc {
		width: 700rpx;
		margin: 30rpx auto 0 auto;
		padding-left: 60rpx;
		box-sizing: border-box;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1px solid #E4E4E4;
		line-height: 80rpx;
	}

	.rcjd {
		color: #666666;
		border: 1px solid #E4E4E4;
		border-top: none;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 360*2rpx;
		height: 94*2rpx;
		margin: 0 auto;
		view{
			line-height: 40rpx;
		}
		&>view:first-child {
			font-weight: 600;
		}
		&>view:last-child{
			height: 80*2rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
		}
		button {
			height: 65rpx;
			line-height: 65rpx;
			font-size: 32rpx;
			margin: 0;
			border: none;
			background-color: #0079FE;
		}

		
	}
	.jsts{
		&>view:first-child {
			margin-top: 30rpx;
			border-top: 1px solid #E4E4E4;
		}
	}
</style>
